<template>
	<view class="container">
		<div class="max-box" @touchstart="start()" @touchend="end()" :class="isActive?'hoverbox':''">
			<ul class="ul">
			    <li class="li"><image src="../../static/images/h1.png"></li>
			    <li class="li"><image src="../../static/images/h2.png"></li>
			    <li class="li"><image src="../../static/images/h3.png"></li>
			    <li class="li"><image src="../../static/images/h4.png"></li>
			    <li class="li"><image src="../../static/images/h5.png"></li>
			    <li class="li"><image src="../../static/images/h6.png"></li>
			</ul>
			<div class="min-box">
			    <ol class="ol">
			        <li class="li"><image src="../../static/images/1.png"></li>
			        <li class="li"><image src="../../static/images/2.png"></li>
			        <li class="li"><image src="../../static/images/3.png"></li>
			        <li class="li"><image src="../../static/images/4.png"></li>
			        <li class="li"><image src="../../static/images/5.png"></li>
			        <li class="li"><image src="../../static/images/6.png"></li>
			    </ol>
			</div>
		</div>
		    
		</div>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name:'home',
		data(){
			return{
				isActive:false,
			}
		},
		methods:{
		
			start () {
			
			      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
			
			      this.loop = setTimeout(() => {
			
			        console.log("长按了");
					this.isActive = true;
			
			      }, 200);
			
			 },
			
			 end () {
			
			    clearTimeout(this.loop); //清空定时器，防止重复注册定时器
				this.isActive = false;
			
			 },
			
			
		}
		
	}
</script>

<style lang="scss">
	.container{
		margin:0;
		padding:0;
		width:100vw;
		// background:url(../../static/bgImg/wxzg.jpeg) no-repeat center;
		// background-size: 100%;
		background:rgba(106,181,106,1);
		// background:green;
		.max-box{
		    width:9rem;
		    height:9rem;
		    background-size:50% 50%;
		    position:fixed;
		    left:0;top:0;
		    right:0;bottom:0;
		    margin:auto;
		    transform-style:preserve-3d;
		    animation:rotateImage 10s linear infinite;
			.ul{
				.li{
				    display:block;
				    width:9rem;
				    height:9rem;
				    text-align: center;
				    line-height:9rem;
				    position:absolute;
					left:2rpx;
				    transform-origin:center center ;
					image{
						display:block;
						width:9rem;
						height:9rem;
						position:absolute;
						transform-origin:center center;
						opacity:0.99;
						border-radius: 0.3125rem;
						
					 }
					  &:nth-child(1){
						  transform: translateZ(4.5rem);
					  }
					  &:nth-child(2){
						  transform: rotateY(90deg) translateZ(4.5rem);
					  }
					  &:nth-child(3){
						  transform: rotateX(90deg) translateZ(-4.5rem);
					  }
					  &:nth-child(4){
						  transform: rotateX(-90deg) translateZ(-4.5rem);
					  }
					  &:nth-child(5){
						  transform: rotateY(90deg) translateZ(-4.5rem);
					  }
					  &:nth-child(6){
						  transform: rotateY(180deg) translateZ(4.5rem);
					  }
				}
			}
			
			.min-box{
				// background:green; 
			    width:3.75rem;
			    height:3.75rem;
			    background-size:50% 50%;
			    position:fixed;
			    left:-5rem;
				top:0;
			    right:0;
				bottom:0;
			    margin:auto;
			    // transform-style:preserve-3d;
			    // animation:rotateImage 30s linear infinite;
				.ol{
				    transform-origin:center center ;
					
					.li{
						  display:block;
						  width:3.75rem;
						  height:3.75rem;
						  text-align: center;
						  line-height:3.75rem;
						  font-size:3.75rem;
						  position:absolute;
						  transform-origin:center center ;
						  image{
						      display:block;
						      width:3.75rem;
						      height:3.75rem;
						      position:absolute;
						      transform-origin:center center;
						      border-radius: 5px;
						      opacity:0.9
						  }
						  &:nth-child(1){
						      transform: translateZ(1.88rem);
						  }
						  &:nth-child(2){     
						      transform: rotateY(90deg) translateZ(1.88rem);
						  }
						  &:nth-child(3){       
						      transform: rotateX(90deg) translateZ(-1.88rem);
						  }
						  &:nth-child(4){   
						      transform: rotateX(-90deg) translateZ(-1.88rem);
						  }
						  &:nth-child(5){      
						      transform: rotateY(90deg) translateZ(-1.88rem);
						  }
						  &:nth-child(6){
						      transform: rotateY(180deg) translateZ(1.88rem);
						  }
					  }
				}
			}
		}
		.hoverbox:hover{
			width:12rem;
			height:12rem;
			animation:rotateImage 10s linear infinite;
			.ul{
				.li{
					display:block;
					width:12rem;
					height:12rem;
					text-align: center;
					line-height:12rem;
					position:absolute;
					transform-origin:center center ;
					image{
						display:block;
						width:12rem;
						height:12rem;
						position:absolute;
						transform-origin:center center;
						opacity:0.5;
						border-radius: 0.3125rem;
			
					}
					&:nth-child(1){
					    transform: translateZ(7rem);
					}
					&:nth-child(2){
					    transform: rotateY(90deg) translateZ(7rem);
					}
					&:nth-child(3){
					    transform: rotateX(90deg) translateZ(-7rem);
					}
					&:nth-child(4){
					    transform: rotateX(-90deg) translateZ(-7rem);
					}
					&:nth-child(5){
					    transform: rotateY(90deg) translateZ(-7rem);
					}
					&:nth-child(6){
					    transform: rotateY(180deg) translateZ(7rem);
					}
				}
			}
		}
		
		@keyframes rotateImg{
		    from{
		        transform: rotateX(0deg) rotateY(0px) rotateZ(0deg);
		    }  
		    to{
		        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		    } 
		}
		@keyframes rotateImage{
			0%{
				transform:rotateX(-20deg) rotateY(0deg);
			}
			25%{
				transform:rotateX(-20deg) rotateY(180deg);
			}
			50%{
				transform:rotateX(-20deg) rotateY(360deg);
			}
			75%{
				transform:rotateX(-20deg) rotateY(540deg);
			}
			100%{
				transform:rotateX(-20deg) rotateY(720deg);
			}
		}
		
		
		
	}
	     
    	       
</style>




	
	
	
<!-- ================ -->
<!-- 


<template>
	<view class="content">
		<view v-if="hasLogin" class="hello">
			<view class="title">
				您好 {{userName}}，您已成功登录。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “退出” 可以 “注销当前账户”</view>
			</view>
		</view>
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好 游客。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		onLoad() {
			if (!this.hasLogin) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul>view {
		line-height: 25px;
	}
</style>

